﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebMap.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello, World</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 50%;
            margin: 0px;
            padding: 0px;
        }
        #container
        {
            width: 600px;
            height: 500px;
        }
    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

</head>
<body onload="loand()">
    <form id="form1" runat="server">
    <div id="container">
        
    </div>
     
    <input id="lng" type="hidden" runat="server" />
    <input id="lat" type="hidden" runat="server" />
     <input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" />
    <input id="Button2" type="button" value="画圆" runat="server" onclick="huayuan()" />
    <input id="Button3" type="button" value="十万测距" runat="server" onclick="distance()" />
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1"
        runat="server">
        <ContentTemplate>
         <asp:Button ID="Button4" runat="server" Text="保存位置" />  
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <asp:Button ID="Button5" runat="server" Text="Button" /> 
          <div runat="server" id="info">
    </div> 
        </ContentTemplate>
    <Triggers>
                <%--<asp:AsyncPostBackTrigger    ControlID="Button5" />--%>
                <asp:AsyncPostBackTrigger  ControlID="Button4" />
            </Triggers>
    </asp:UpdatePanel>
    <asp:Button ID="Button6" runat="server" Text="Button" /><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    <input  runat ="server" id="HiddenX" type="hidden" />
     <input  runat ="server" id="HiddenY" type="hidden" />
    <script type="text/javascript">

  //十万个点模拟测距
   function distance() {
   //
   //map.removeOverlay(marker);
    // var map = new BMap.Map("container");
    var dis=0;
     var point1 = new BMap.Point(104.083, 30.686);
      var point2 = new BMap.Point(104.088, 30.686);
    for(var i=0;i<10000;i++){
       
      dis = dis +  map.getDistance(point1, point2 );

     }
    map.addEventListener("click", function(e){ 
        document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;  
      var point = new BMap.Point(e.point.lng, e.point.lat);
           marker = new BMap.Marker(point);
       map.addOverlay(marker); //标记地图
         });   
          
      // alert(dis);
   }
      var marker ;
        function getbiaoji() {
         
            var lng = document.getElementById("lng").value;
            var lat = document.getElementById("lat").value;
//            alert(lng);
//            alert(lat);
            var map = new BMap.Map("container");
            var point = new BMap.Point(lng, lat);
          marker = new BMap.Marker(point);
            var opts = {
                width: 250,     // 信息窗口宽度  
                height: 100,     // 信息窗口高度  
                title: "经销商地址"  // 信息窗口标题  
            }
            var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址:<br />经度:" + lng +"<br />,纬度:"+ lat, opts);  // 创建信息窗口对象

            marker.enableDragging(); //启用拖拽
            map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
              map.enableKeyboard(); //键盘放大

            map.centerAndZoom(point, 13); //绘制地图
            map.addOverlay(marker); //标记地图
            


            //map.openInfoWindow(infoWindow, map.getCenter());
         
        }


        function huayuan(){
          var map = new BMap.Map("container");
          map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
              map.enableKeyboard(); //键盘放大
         
        var lng = document.getElementById("lng").value;
            var lat = document.getElementById("lat").value;
            alert(lng);//104.083
             alert(lat);//30.686
            var point = new BMap.Point(lng, lat);
  
        // alert(19);
         map.centerAndZoom(point, 13); //绘制地图
        var circle1 = new BMap.Circle(point,1000);
        var circle2 = new BMap.Circle(point,3000);
      var circle3 = new BMap.Circle(point,5000);
      map.addOverlay(circle3);
         map.addOverlay(circle2);
         map.addOverlay(circle1);
        }
        
         var map;
        function loand() {
        
            map = new BMap.Map("container");
            document.getElementById("lng").value=104.083;
            document.getElementById("lat").value=30.686;
            var point = new BMap.Point(104.083, 30.686); //默认中心点
           marker = new BMap.Marker(point);
            var opts = {
                width: 250,     // 信息窗口宽度  
                height: 100,     // 信息窗口高度  
                title: "经销商地址"  // 信息窗口标题  
            }
            var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址", opts);  // 创建信息窗口对象

 
         //marker.addEventListener('dragend', function(e){    alert(e.point.lng + ', ' + e.point.lat);})
            marker.enableDragging(); //启用拖拽
            marker.addEventListener("dragend", function (e) {
                point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标（拖拽以后的坐标）
                marker = new BMap.Marker(point);
 
                document.getElementById("lng").value = e.point.lng;
                document.getElementById("HiddenX").value = e.point.lng;              
               
                document.getElementById("lat").value = e.point.lat;
                document.getElementById("HiddenY").value = e.point.lat;
                infoWindow = new BMap.InfoWindow("当前位置<br />经度：" + e.point.lng + "<br />纬度：" + e.point.lat, opts);

                map.openInfoWindow(infoWindow, point);
            })

            map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
            map.enableKeyboard(); //键盘放大

            map.centerAndZoom(point, 13); //绘制地图
            map.addOverlay(marker); //标记地图

            map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口      
        }
         
    </script>

    </form>
</body>
</html>
